<template>
	<uv-navbar :fixed="true" :placeholder="true" :title="title" left-arrow @leftClick="$onClickLeft" @rightClick="handleAddAlarm">
		<template v-slot:right>
			<view class="uv-nav-slot" >
				<!-- <text>新建</text> -->
				<uv-icon name="plus-circle" size="19"></uv-icon>
				<!-- <uv-line direction="column" :hairline="false" length="16" margin="0 8px"></uv-line> -->
			</view>
		</template>
	</uv-navbar>

	<view class="base-message">
		<view class="alarm-title">{{detailData.name}}</view>
		<uv-cell-group title="告警信息">
			<uv-cell title="设备ID：" :value="detailData.equipment"></uv-cell>
			<uv-cell title="状态：" :value="formatState(detailData.alState)"></uv-cell>
			<!-- 动态字段 -->
			<uv-cell :title="fieldTitle" :value="fieldValue"></uv-cell>
			<uv-cell title="等级：" :value="formatGrade(detailData.grade)"></uv-cell>
			<uv-cell title="告警开始时间：" :value="detailData.createTime"></uv-cell>
			<uv-cell title="告警结束时间：" :value="detailData.recoveryTime"></uv-cell>
		</uv-cell-group>

	</view>

</template>

<script setup>
	import {
		ref,
		computed,
		reactive,
		getCurrentInstance
	} from "vue"
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {
		alarmMap,
		alarmDetailMap
	} from "@/utils/mapping/alarmMap"
	import {
		reqChargeDetail
	} from "@/api/model/chargingStation"

	const title = ref('告警详情')
	const detailData = ref({

	})
	const moduleId = ref(null)
	const getDetail = async (id) => {
		const {
			data
		} = await alarmDetailMap(id, moduleId.value)
		// console.log("详情数据", data)
		detailData.value = data.data
	}
	//格式化
	const formatState = (val) => {
		const map = {
			0: '已恢复',
			1: '发生中',
			2: '已忽略'
		}
		return map[val]
	}
	const formatGrade = (val) => {
		const map = {
			0: '正常',
			1: '告警',
			2: '提示'
		}
		return map[val]
	}

	onLoad((option) => {
		moduleId.value = uni.getStorageSync('zh-h5-select-module')
		const instance = getCurrentInstance().proxy;
		const eventChannel = instance.getOpenerEventChannel()
		eventChannel.on('getAlarmId', (data) => {
			getDetail(data.alarmId)
		})

	})
	const fieldTitle = computed(() => {
		return moduleId.value == 2 ? "所属电站：" : "设备类型：";
	})
	//添加报警
	const handleAddAlarm = () => {
		console.log("跳转", detailData.value)
		let detailDataStr = JSON.stringify(detailData.value)
		uni.navigateTo({
			url: `/pages/components/pages/yunwei/createOrder?detailData=${detailDataStr}`,
			success: () => {
				
			}
		})
	}
	const fieldValue = computed(() => {
		return moduleId.value == 2 ? detailData.value.powerStation :
			detailData.value.eqType;
	})
</script>

<style lang="scss" scoped>
	.base-message {
		.alarm-title {
			height: 90rpx;
			line-height: 90rpx;
			padding-left: 5%;
			font-size: 33rpx;
			font-weight: 500;
		}

		::v-deep {
			.uv-cell-group {
				.uv-cell-group__title {
					background: #c0c7c7;
					font-size: 14px;
					font-weight: 500;
				}
			}
		}


	}
</style>